<template>
  <div class="w-100% h-300rpx">
    <base-chart :options="options" />
  </div>
</template>

<script setup>
import { ref,watch  } from 'vue'
import baseChart from '@/echarts/BaseCharts.vue'
// 接收来自父组件传递的 props
const props = defineProps({
  option: {
    type: Object,
    required: true,
  },
});
// 监视 props 的变化，以便更新本地状态
watch(() => props.option, (newValue) => {
  option.value = newValue;
});
const options = ref(props.option);

// 监视 props.option 的变化，并更新本地 options
watch(() => props.option, (newValue) => {
  options.value = { ...newValue }; // 深拷贝，避免直接引用修改
}, { deep: true });
// const options = ref({
//   grid: {
//     left: '3%',
//     right: '6%',
//     bottom: '3%',
//     top: '8%',
//     containLabel: true
//   },
//   tooltip: {
//     trigger: 'axis',
//     confine: true
//   },
//   xAxis: {
//     boundaryGap: false,
//     type: 'category',
//     axisLabel: {
//       color: '#999999'
//     },
//     axisTick: {
//       show: false
//     },
//     axisLine: {
//       show: false
//     },
//     data: ['03:00', '06:00', '07:00', '12:00', '15:00', '18:00', '21:00']
//   },
//   yAxis: {
//     type: 'value',
//     axisLabel: {
//       color: '#999999'
//     }
//   },
//   series: [
//     {
//       smooth: true,
//       symbolSize: 0,
//       lineStyle: {
//         normal: {
//           color: '#8dadfa' // 线条颜色
//         }
//       },
//       data: [150, 224, 218, 135, 147, 113, 211],
//       type: 'line'
//     }
//   ]
// })

// setTimeout(() => {
//   options.value.series[0].data = option
// }, 3000)

</script>

    <style lang="scss" scoped>

    </style>
